import { useIntersectionObserver } from '@vueuse/core'

export default {
  // 图片懒加载  原理是利用intersectionObserver  不可见的时候不加载，可见的时候加载
  mounted(el) {
    // 拿到图片的src
    const imgSrc = el.src
    // 清空src
    el.src = ''
    // 监听图片是否可见
    const { stop } = useIntersectionObserver(el, ([{ isIntersecting }]) => {
      // 如果可见赋值src
      if (isIntersecting) {
        el.src = imgSrc
        // 停止监听
        stop()
      }
    })
  }
}
